<script lang="ts" setup>
  import { ref } from "vue";

  const dataList = ref<any>([
    {
      name: "广东省",
      sort: "50",
      code: "44",
      isLeaf: false,
    },
    {
      name: "广州市",
      sort: "50",
      code: "440100",
      isLeaf: false,
    },
    {
      name: "海珠区",
      sort: "50",
      code: "440105",
      isLeaf: true,
    },
  ]);

  const modalVisible = ref(false);

  const handleAction = (action: string) => {
    if (action === "add") {
      modalVisible.value = true;
    }
  };
</script>

<template>
  <umrp-container :gap="16" bg-color="#f2f2f2" height="100%" padding="16px">
    <umrp-breadcrumb :items="['系统管理', '区域列表']"></umrp-breadcrumb>
    <umrp-card :border="false">
      <umrp-table :action-bar="true" :data="dataList" :pagination="false" @action="handleAction">
        <template #columns>
          <umrp-table-column title="区域名称" slot-name="name"></umrp-table-column>
          <umrp-table-column title="区域编码" data-index="code"></umrp-table-column>
          <umrp-table-column title="区域排序" data-index="sort"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="200"></umrp-table-column>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary" @click="modalVisible = true">新增子项</umrp-button>
            <umrp-button type="primary" @click="modalVisible = true">编辑</umrp-button>
            <umrp-popconfirm message="您确认删除么？">
              <umrp-button type="danger">删除</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
        <template #name="{ record }">
          <umrp-container direction="horizonal" :gap="10">
            <umrp-icon name="right" :style="{ opacity: record.isLeaf ? 0 : 1 }"></umrp-icon>
            <umrp-text>{{ record.name }}</umrp-text>
          </umrp-container>
        </template>
      </umrp-table>
    </umrp-card>
  </umrp-container>
  <umrp-modal width="500px" v-model:visible="modalVisible">
    <umrp-form>
      <umrp-form-item label="区域名称">
        <umrp-input placeholder="请输入区域名称"></umrp-input>
      </umrp-form-item>
      <umrp-form-item label="区域编码">
        <umrp-input placeholder="请输入区域编码"></umrp-input>
      </umrp-form-item>
      <umrp-form-item label="区域排序">
        <umrp-input-number :default-value="0" placeholder="请输入区域排序"></umrp-input-number>
      </umrp-form-item>
    </umrp-form>
  </umrp-modal>
</template>
